import { useGetAllCompletedTasks } from "@/entities/AllCompletedTasks/model/useGetAllCompletedTasks";
import { useGetAllDisciplines } from "@/entities/discipline/model/useGetAllDisciplines";
import { useGetAllThemes } from "@/entities/theme/model/useGetAllThemes";
import { useGetCurrentUser } from "@/entities/user/model/useGetCurrentUser";
import UiProfile from "@/entities/user/ui/UiProfile";
import LogoutButton from "@/features/logout/ui/LogoutButton";
import { UiHeader } from "@/shared/Uikit/UiHeader";
import { PageSpinner } from "@/shared/Uikit/UiPageSpinner";
import Link from "next/link";
import { ReactNode, useState } from "react";
import { FaArrowRight, FaBook, FaBookOpen, FaDashcube, FaDoorOpen, FaHome, FaSlidersH } from "react-icons/fa";
import { FaArrowRightToBracket } from 'react-icons/fa6'



export default function Dashboard() {
    const { user, isSuccess, isLoading, errorMessage } = useGetCurrentUser()
    const { disciplines } = useGetAllDisciplines()
    const { themes } = useGetAllThemes()
    const completedTasks = useGetAllCompletedTasks()

    return (
        <>
            {isLoading &&
                <PageSpinner className='bg-gray-100 opacity-75' />
            }
            {isSuccess && disciplines && user && completedTasks.isSuccess && completedTasks.completedTasks &&
                <>
                    <div className='min-h-screen w-screen flex flex-row bg-gray-200'>
                        <div className={` top-0 left-0 h-screen w-64 overflow-y-auto bg-white text-gray-800 z-50 transition duration-300 ease-in-out border-r-1`}>
                            <div className="flex items-center justify-between px-4 py-2">
                                <h2 className="text-xl font-bold">AviaClass</h2>
                            </div>
                            <nav className="mt-4">
                                <ul className="space-y-2">
                                    <li className="px-4 py-2 hover:bg-gray-200">
                                        <Link href="#" className="flex items-center text-base font-medium">
                                            <FaHome className="size-5 mr-2" />
                                            <span>Главная</span>
                                        </Link>
                                    </li>
                                    <li className="px-4 py-2 hover:bg-gray-200">
                                        <Link href="/disciplines" className="flex items-center text-base font-medium">
                                            <FaBook className="mr-2 size-5" />
                                            <span>Дисциплины</span>
                                        </Link>
                                    </li>

                                    <li className="">
                                        <LogoutButton className="px-4 py-2 w-full hover:bg-gray-200 flex items-center text-base font-medium" />

                                    </li>
                                </ul>
                            </nav>
                        </div>
                        <div className='w-full bg-white '>
                            <UiHeader
                                title="Главная"
                                right={<UiProfile />}
                            />
                            <div className='h-full w-full p-4'>
                                <section className="py-8  justify-around">
                                    {/* Completed Tasks Section */}
                                    <h2 className="text-lg font-medium text-gray-800">Результаты</h2>
                                    <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                                        <div className="bg-white rounded-lg shadow-md p-6 text-center">
                                            <h3 className={`text-lg font-medium text-green-500`}>
                                                Дисциплин завершено
                                            </h3>
                                            <span className="text-4xl font-bold">{completedTasks.completedTasks.completedDisciplines.length}</span>
                                        </div>
                                        <div className="bg-white rounded-lg shadow-md p-6 text-center">
                                            <h3 className={`text-lg font-medium text-green-500`}>
                                                Тем завершено
                                            </h3>
                                            <span className="text-4xl font-bold">{completedTasks.completedTasks.completedThemes.length}</span>
                                        </div>                                        <div className="bg-white rounded-lg shadow-md p-6 text-center">
                                            <h3 className={`text-lg font-medium text-green-500`}>
                                                Уроков завершено
                                            </h3>
                                            <span className="text-4xl font-bold">{completedTasks.completedTasks.completedLessons.length}</span>
                                        </div>
                                    </div>
                                </section>
                                <section className="mt-8">
                                    <h2 className="text-lg font-medium text-gray-800">Мои дисциплины</h2>

                                    <table className="w-full bg-white shadow-md rounded-lg overflow-hidden">
                                        <thead>
                                            <tr>
                                                <th className="bg-gray-100 text-gray-600 px-6 py-4 text-left">Название</th>
                                                <th className="bg-gray-100 text-gray-600 px-6 py-4">Уровень</th>
                                                <th className="bg-gray-100 text-gray-600 px-6 py-4">Статус</th>
                                                <th className="bg-gray-100 text-gray-600 px-6 py-4">Прогресс</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {disciplines.map((discipline) => (
                                                <tr key={discipline.id}>
                                                    <td className="px-6 py-4 whitespace-nowrap">{discipline.tittle}</td>
                                                    <td className="px-6 py-4 text-center">Для начинающих</td>
                                                    <td className="px-6 py-4 text-center">
                                                        {
                                                            completedTasks.completedTasks?.completedDisciplines.find((id) => {
                                                                return id == discipline.id
                                                            }) ? (
                                                                <span className="text-green-500">Завершено</span>
                                                            ) : (
                                                                <span className="text-orange-500">В процессе</span>
                                                            )}
                                                    </td>
                                                    <td className="px-6 py-4 text-center">
                                                        %
                                                    </td>
                                                </tr>
                                            ))}
                                        </tbody>
                                    </table>
                                </section>
                            </div>
                        </div>
                    </div>
                </>
            }
        </>

    )
}
